<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<template>
		  <div class="counter">
		    <button @click="decrement">-</button>
		    <span>{{ count }}</span>
		    <button @click="increment">+</button>
		  </div>
		</template>
		
		<script>
		import { ref } from 'vue';
		
		export default {
		  setup() {
		    // 使用ref定义一个响应式变量
		    const count = ref(0);
		
		    // 增加计数的函数
		    const increment = () => {
		      count.value += 1;
		    };
		
		    // 减少计数的函数
		    const decrement = () => {
		      count.value -= 1;
		    };
		
		    // 返回响应式变量和函数供模板使用
		    return {
		      count,
		      increment,
		      decrement
		    };
		  }
		};
		</script>
		
		<style scoped>
		.counter {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  margin-top: 50px;
		}
		
		button {
		  font-size: 1.2em;
		  padding: 10px 20px;
		  margin: 0 10px;
		  cursor: pointer;
		}
		
		span {
		  font-size: 2em;
		  margin: 0 10px;
		}
		</style>
	</body>
</html>